<template>
	<view>
		<f-navbar title="消防技术服务（维保）" :iconLeft="true" :isBack="true" @goBack="goBack" />
		<company-home ref="home" v-if="tabberIndex == 0" />
		<company-square @handleScroll="handleScroll" @handlepageScrollTo="handlepageScrollTo" ref="square"
			v-if="tabberIndex == 1" />
		<company-project @handleScroll="handleScroll" ref="project" v-if="tabberIndex == 2" />
		<company-personal ref="personal" v-if="tabberIndex == 3" />
		<f-tabber />
		<u-back-top :scrollTop="scrollTopList.scrollTop" top="200" mode="circle" :iconStyle="scrollTopList.iconStyle"
			:customStyle="scrollTopList.customstyle"></u-back-top>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import companyHome from './home/companyHome.vue';
	import companySquare from '../commonInside/square/Square.vue';
	import companyProject from './project/companyProject.vue';
	import companyPersonal from '../commonInside/personal/Personal.vue';
	export default {
		name: 'Company',
		components: {
			companyHome,
			companySquare,
			companyProject,
			companyPersonal
		},
		data() {
			return {
				// 返回顶部组件参数
				scrollTopList: {
					scrollTop: 0,
					iconStyle: {
						fontSize: '32rpx',
						color: '#FFFFFF'
					},
					customstyle: {
						background: '#3B83FE'
					}
				},
				scrollTop: null // 距离顶部的距离
			};
		},
		onPageScroll(e) {
			this.scrollTopList.scrollTop = e.scrollTop;
			this.scrollTop = e.scrollTop // 记录当前的位置
		},
		// 页面关闭清空滚动距离
		onUnload() {
			uni.setStorageSync('scrollVal', 0)
		},
		computed: {
			// 导航栏当前点击的index
			...mapState({
				tabberIndex: modules => modules.tabber.tabberIndex
			})
		},
		onShow() {
			uni.hideHomeButton(); // 隐藏小房子
			// 动态刷新数据
			this.$nextTick(() => {
				if (this.tabberIndex == 0) {
					this.$refs.home.showLoading();
					return;
				}
				if (this.tabberIndex == 1) {
					this.$refs.square.showLoading();
					// 位置清0
					uni.pageScrollTo({
						scrollTop: 0, //uni.getStorageSync('scrollVal'),
						duration: 0
					})
					this.$nextTick(() => {
						// 滚动到指定的位置
						uni.pageScrollTo({
							scrollTop: uni.getStorageSync('scrollVal'),
							duration: 1000
						})
					})
					return;
				}
				if (this.tabberIndex == 2) {
					this.$refs.project.showLoading();
					// 位置清0
					uni.pageScrollTo({
						scrollTop: 0, //uni.getStorageSync('scrollVal'),
						duration: 0
					})
					this.$nextTick(() => {
						// 滚动到指定的位置
						uni.pageScrollTo({
							scrollTop: uni.getStorageSync('scrollVal'),
							duration: 1000
						})
					})
					return;
				}
				if (this.tabberIndex == 3) {
					this.$refs.personal.showLoading();
					return;
				}
			})

		},
		// 上拉加载
		onReachBottom() {
			if (this.tabberIndex == 0) {
				this.$refs.home.pullLoading();
				return;
			}
			if (this.tabberIndex == 1) {
				this.$refs.square.pullLoading();
				return;
			}
			if (this.tabberIndex == 2) {
				this.$refs.project.pullLoading();
				return;
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.tabberIndex == 0) {
				this.$refs.home.downLoading();
				return;
			}
			if (this.tabberIndex == 1) {
				this.$refs.square.downLoading();
				return;
			}
			if (this.tabberIndex == 2) {
				this.$refs.project.downLoading();
				return;
			}
			if (this.tabberIndex == 3) {
				this.$refs.personal.downLoading();
				return;
			}
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			// 返回首页
			goBack() {
				this.changeTabberIndex(0) // 底部导航栏Index默认为0
				this.$pageJump.reLaunch('/pages/homeCentral/Central');
			},
			// 项目列表点击进入详情---返回的时候记录的项目的位置
			handleScroll() {
				uni.setStorageSync('scrollVal', this.scrollTop)
			},
			// 广场切换类型的时候 ---回到顶部
			handlepageScrollTo() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 1000
				});
			}
		},
		onShareAppMessage() {
			return {
				title: '分享小程序给朋友',
				path: '/pages/homePage/Home'
			};
		}
	};
</script>

<style lang="scss" scoped>
	/deep/.u-badge--bg--error {
		right: 34% !important;
	}

	/deep/.u-btn--default {
		color: #bcbfcc !important;
		border-color: #bcbfcc !important;
	}
</style>